<!--
 * @Author: wangming
 * @Date: 2022-04-18 16:02:27
 * @LastEditors: wangming
 * @LastEditTime: 2022-04-21 12:43:03
 * @FilePath: /hanma-application-designer-fed/src/pages/designUniversal/__components__/dynamicForm/rightModel/components/hlTableList/__components__/DragButtons.vue
 * @Description: 
-->
<template>
  <div>
    <draggable
      handle=".mover"
      :animation="200"
      :list="value.customBtn"
      :delay="20"
      chosen-class="drawing-chosen"
      drag-class="drawing-drag"
    >
      <div
        v-for="(item, index) in value.customBtn"
        :key="item.composerKey"
        class="ks-row-middle codebg lh1 mb5"
      >
        <div class="ks-col g3">
          <el-tag size="mini">
            <span class="button-title-tag">{{ item.label }}</span>
          </el-tag>
        </div>
        <template v-if="!item._sys_">
          <span
            key="custom"
            class="iconfont iconbianji mr10 poi iconcolor"
            @click="edit(item)"
          ></span>
          <template v-if="item.composeType !== 'logic'">
            <span
              class="iconfont icondaima mr10 poi iconcolor"
              @click="openCode()"
            ></span>

            <el-popconfirm
              @confirm="value.customBtn.splice(index, 1)"
              title="确定要删除该按钮吗？"
              placement="top"
            >
              <i
                class="iconfont iconicon_shanchu poi iconcolor"
                slot="reference"
              />
            </el-popconfirm>
          </template>
          <template v-else>
            <img
              src="@/assets/image/composer.svg"
              width="16"
              class="poi mr10"
              @click="openBlockEditor(item)"
            />
            <span
              key="logic"
              class="iconfont iconicon_shanchu poi iconcolor"
              @click="removeComposer(index, value.customBtn, item)"
            ></span>
          </template>
        </template>
        <i class="el-icon-rank f16 iconcolor mover ml10"></i>
      </div>
    </draggable>
    <BlockEditor ref="BlockEditor"></BlockEditor>
  </div>
</template>

<script>
import addModuleBtn from "./addModuleBtn/index.js";
import draggable from "vuedraggable";
import { Events } from "@/utils/Dynamic.js";
import BlockEditor from "@/components/blockly/BlockEditor";
import MicroBlocklyEditor from "@/components/BlocklyEditor";
import { cloneDeep } from "lodash";
export default {
  components: { draggable, BlockEditor },
  props: ["value", "getFormData"],
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    edit(item) {
      addModuleBtn
        .editModule(
          { ...item },
          {
            moduleId: this.value.moduleId,
            modelCode: this.value.modelCode,
            key: this.value.key,
            label: "自身表格选中列",
          },
          { cuestomBtn: this.value.tagName === "hlChildOperate" }
        )
        .then(
          ({
            buttonHandler,
            composeType,
            eventName,
            label,
            buttonType,
            systemAction,
            relatinonFormId,
            composerKey,
            RuleConditions,
            isSecondaryConfirm,
            SecondaryConfirmCon,
            title_i18n,
            ConfirmCon_i18n,
            importTemplate, // 导入模板参数
          }) => {
            const data = {
              label,
              handler: buttonHandler === "custom" ? "custom" : systemAction,
              eventName,
              composeType,
              composerKey,
              buttonType,
              relatinonFormId,
              RuleConditions,
              isSecondaryConfirm,
              SecondaryConfirmCon,
              title_i18n,
              ConfirmCon_i18n,
              importTemplate:cloneDeep(importTemplate)
            };
            Object.assign(item, data);
            if (data?.eventName && data.eventName !== "") {
              this.getFormData.js = Events.addFunctionJSON(
                this.getFormData.js,
                data?.eventName
              );
            }
            if (
              data?.composeType === "logic" &&
              data?.eventName &&
              data.eventName !== ""
            ) {
              const composerData = this.getFormData.composer?.find(
                (event) => event.composerKey === item.composerKey
              );
              composerData.eventName = data.eventName;
              composerData.funcDesc = data.eventName;
            }
          }
        );
    },
    openCode() {
      this.$monacoEditor.showEdit("javascript", this.getFormData);
    },
    removeComposer(index, list, event) {
      list.splice(index, 1);
      // 从全局删除逻辑编排
      const composerIndex = this.getFormData.composer?.findIndex(
        (item) => item.composerKey === event.composerKey
      );
      // this.getFormData.composer.splice(composerIndex, 1);
    },
    openBlockEditor(item) {
      // item里面可以拿到函数名
      const composerData = this.getFormData.composer?.find(
        (event) => event.composerKey === item.composerKey
      );

      if (!composerData) {
        Message.warning("未找到对应编排信息");
        return;
      }

      // ** start 编辑时判断编排版本 since v2.7.1 **
      if (composerData._MicroApp) {
        MicroBlocklyEditor.openForDesktop(composerData);
        return;
      }
      // ** end **

      const eventData = {
        ...item,
        eventXml: composerData.eventXml,
        eventJs: composerData.eventJs,
      };
      this.$refs.BlockEditor.open(eventData, this.value, (data) => {
        // 更新组件逻辑编排名称
        item.eventName = data.eventName;
        // 将变更之后的数据保存到全局
        composerData.eventName = data.eventName;
        composerData.eventXml = data.eventXml;
        composerData.eventJs = encodeURIComponent(data.eventJs);
      });
    },
  },
};
</script>
<style scoped lang="scss">
.codebg {
  border: 1px solid #f1f1f1;
  padding: 5px 10px;
  &:hover {
    background-color: #f3f9ff;
  }
}
.button-title-tag {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
